<template>
    <div class="goodclassedit">
        <el-dialog
                :title="title"
                :visible.sync="dialogFormVisible"
                width="800px"
                :close-on-click-modal="false"
                @close="close"
        >
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="分类排序">
                    <el-input v-model="form.sort" type="number" placeholder="请输入分类排序"></el-input>
                </el-form-item>
                <el-form-item label="分类名称" prop="name" :required="true">
                    <el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
                </el-form-item>
                <el-form-item label="分类描述">
                    <el-input type="textarea" v-model="form.describe" placeholder="请输入分类描述"></el-input>
                </el-form-item>
                <el-form-item label="分类图标">
                    <div class="uploadSource bor_de rel flex" v-if="form.icon">
                        <label class="statusLabel curs"  @mouseenter="enter(1)" @mouseleave="leave(1)">
                            <i class="el-icon-check" ref="imgicon1"></i>
                            <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
                        </label>
                        <img :src="form.icon" @click='test(1)' class="wid"/>
                    </div>
                    <div class="uploadSource flex-center curs" v-else @click='test(1)'>
                        <i class="el-icon-plus fon_40 color_d9"></i>
                    </div>
                    <attachment-img ref="img1" type="img" @attachment='imgadd1'></attachment-img>
                </el-form-item>
                <el-form-item label="分类属性" v-show="title!='添加二级分类'">
                    <el-radio-group v-model="form.isRequire">
                        <el-radio label="2">无</el-radio>
                        <el-radio label="1">分类必选</el-radio>
                        <el-radio label="3">自定义属性名称</el-radio>
                    </el-radio-group>
<!--                    <div v-show="form.type=='1'">-->
<!--                        <el-checkbox v-model="form.isRequire" true-label="1" false-label="2">下单必选分类</el-checkbox>-->
<!--                    </div>-->
                    <div v-show="form.isRequire=='3'">
                        <el-input v-model="form.customName" :maxlength="4" placeholder="请输入自定义属性名称"></el-input>
                    </div>
                    <div class="yb_margin lh16">设置为下单必选分类后，顾客必须选择下单必选分类中至少一个商品才能成功下单，自定义属性名称最多4个文字</div>
                </el-form-item>
                <el-form-item label="显示状态">
                    <el-radio-group v-model="form.timeType">
                        <el-radio label="1">不限制</el-radio>
                        <el-radio label="2">按时间段显示</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div v-if="form.timeType=='2'">
                <el-form-item label="选择周几">
                    <el-checkbox-group v-model="form.weekStr">
                        <el-checkbox label="周一">周一</el-checkbox>
                        <el-checkbox label="周二">周二</el-checkbox>
                        <el-checkbox label="周三">周三</el-checkbox>
                        <el-checkbox label="周四">周四</el-checkbox>
                        <el-checkbox label="周五">周五</el-checkbox>
                        <el-checkbox label="周六">周六</el-checkbox>
                        <el-checkbox label="周日">周日</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="选择时间段" class="zdy_tsinput">
                    <el-time-select
                            placeholder="起始时间"
                            v-model="form.startTime"
                            :picker-options="{start: '00:00',step: '00:15',end: '23:59'}"
                            style="width:200px">
                    </el-time-select>
                    <span class="mar_lr5">-</span>
                    <el-time-select
                            placeholder="结束时间"
                            v-model="form.endTime"
                            :picker-options="{start: '00:00', step: '00:15',end: '23:59',minTime: form.startTime}"
                            style="width:200px">
                    </el-time-select>
                </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="close">取 消</el-button>
                <el-button size="medium" type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import attachmentImg from "@/plugins/attachment-img";
    import {categorySave } from "@/api/good";
    export default {
        name: "goodlistedit",
        components: { attachmentImg,},
        created() {
        },
        data() {
            return {
                form: {
                    id:'',
                    pid:'',
                    sort: '1',
                    name: '',
                    describe: '',
                    icon: '',
                    isRequire:'2',
                    customName: '',
                    timeType: '1',
                    weekStr: [],
                    startTime: '',
                    endTime: ''
                },
                // rules: {
                //     username: [
                //         { required: true, trigger: "blur", message: "请输入用户名" },
                //     ],
                //     password: [
                //         { required: true, trigger: "blur", message: "请输入密码" },
                //     ],
                //     email: [{ required: true, trigger: "blur", message: "请输入邮箱" }],
                //     permissions: [
                //         { required: true, trigger: "blur", message: "请选择权限" },
                //     ],
                // },
                title: "",
                dialogFormVisible: false,
                type:'',
            }
        },
        methods: {
            showEdit(row) {
                if (!row) {
                    this.title = "添加一级分类";
                } else {
                    this.title = "编辑";
                    this.form = Object.assign({}, row);
                    this.form.type = this.type
                }
                this.dialogFormVisible = true;
            },
            showEdit2(pid){
                this.form.pid = pid
                this.title = "添加二级分类";
                this.dialogFormVisible = true;
            },
            enter(i=0){
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i=0){
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (!type) {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                    }
                }
            },
            close() {
                this.$refs["form"].resetFields();
                this.form = this.$options.data().form;
                this.dialogFormVisible = false;
            },
            setStoreId(storeId){
                this.form.storeId = storeId
            },
            setInType(type){
                this.form.type = type
                this.type = type
            },
            save() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        // console.log(this.form)
                        const { msg } = await categorySave(this.form);
                        this.$baseMessage(msg, "success");
                        this.$emit("fetchData");
                        this.close();
                    } else {
                        return false;
                    }
                });
            },
        }
    };
</script>
